/**
* @desc:  账号管理
* @author qiankui
* @date 2023-4-15 15:35:48
*/
<template>
    <div class="page-container h-100">
        <div class="wrapperform m-b-16">
            <div class="searchbox">
                <el-form :inline="true" :model="form" class="demo-form-inline" @submit.native.prevent>
                    <!--姓名-->
                    <el-form-item :label="$t('name')">
                        <!--请输入姓名-->
                        <el-input class="inputEl" v-model="form.name" :placeholder="$t('Please enter your name')"></el-input>
                    </el-form-item>
                    <el-form-item class="BlankPlaceholder" label=".">
                        <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch">{{this.i18n.t('Query')}}</el-button>
                        <el-button size="small" type="handle" icon="el-icon-refresh-left" @click="resetSearch">{{this.i18n.t('Reset')}}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="table-container table-box globalDiv">
            <BaseGlobalTable :table_config="table_config"
                @addTableData="addTableData"
                @delTableData="delTableData"
                @handelDetail="handelDetail"
                @handleSelectionChange="handleSelectionChange"
                @handleEdit="handleEdit"
                             ref="globalTable">
            </BaseGlobalTable>
        </div>
<!--        <edit ref='edit' :editTableRow='editTableRow' :editFlag.sync='editFlag' v-if='editFlag'></edit>-->
<!--        <keys ref='keys' :editTableRow='editTableRow' :keyFlag.sync='keyFlag' v-if='keyFlag'></keys>-->
<!--        <add ref='add' :editTableRow='editTableRow' :addFlag.sync='addFlag' v-if='addFlag'></add>-->
    </div>
</template>

<script >
    import {devicemodelgetlist, getList} from "@/api/jxgl";
    import {accountinfoGetlist,accountinfoDelete} from "@/api/zhgl";
    import {deleteDocument} from "@/api/document";
    //  添加客户信息管理详情
    // import add from './add.vue';
    // //  查看客户信息管理详情
    // import keys from './editKey.vue';
    // // 引入新增修改弹框
    // import edit from './edit.vue'
    export default {
        name: "kqgl_index",
        // components: {
        //     add,
        //     keys,
        //     edit,
        // },
        props: {},
        data() {
            return {
                input:'',
                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        // 最近一周
                        text: this.i18n.t('Last week'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近一个月
                        text: this.i18n.t('Last month'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近三个月
                        text: this.i18n.t('Last three months'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                sbjxArr:null,
                sbxhArr:null,
                form: {
                    docTypeId:"",
                    deviceModelId:""
                },
                // 数据分析
                table_config: {
                    table_tbody: [
                    ],
                    thead: [
                        { label: "序号", prop: "@id", type: "index", width: "100" },
                        // 用户名
                        { label: this.i18n.t('username'), prop: "userName", type: "", width: "" },
                        // 姓名
                        { label: this.i18n.t('name'), prop: "name", type: "", width: "" },
                        // 角色
                        { label: this.i18n.t('CHARACTERS'), prop: "role", type: "function", width: "", callback: (row) => {
                            let roleName;
                            if (row.role==0) {
                                // 超级管理员
                                roleName = this.i18n.t('Super administrator')
                            } else if (row.role==1) {
                                // 管理员
                                roleName = this.i18n.t('Administrator')
                            } else {
                                // 普通用户
                                roleName = this.i18n.t('common User')
                            }
                            return roleName
                        }},
                        // 创建人
                        { label: this.i18n.t('founder'), prop: "createBy", type: "", width: "" },
                        // 更新时间
                        { label:this.i18n.t('update time'), prop: "updateTime", type: "", width: "" },
                        {
                            // 操作
                            label: this.i18n.t('operation'),
                            prop: "operation",
                            // 当前列的类型，不填为直接渲染文本，function 为调用回调函数，operation 为操作按钮，image 为显示图片
                            type: "operation",
                            width: 130,
                            // 按钮的风格，为 true 则显示自定义图标，为 false 显示 按钮样式
                            icon: true,
                            // 图标风格按钮列表
                            iconClass: [
                                {
                                    type: "detail",
                                    class: "icon-pencil-line",
                                    // 编辑
                                    title: this.i18n.t('edit'),
                                    callback: "handelDetail",
                                    power: "",
                                },
                                {
                                    type: "detail",
                                    class: "icon iconfont-KUI icon-zhongzhimima",
                                    // 修改密码
                                    title: this.i18n.t('reset password'),
                                    callback: "handleEdit",
                                    power: "edit",
                                },
                                {
                                    type: "detail",
                                    class: "icon-trash",
                                    // 删除
                                    title: this.i18n.t('delete'),
                                    callback: "delTableData",
                                    power: "delete",
                                },
                            ],
                        },
                    ],
                    tableButtonArr: [
                        {
                            iconClass: "el-icon-circle-plus-outline",
                            btnType: 2,
                            // 添加
                            text: this.i18n.t('Add'),
                            callback: "addTableData",
                            power: "add",
                            customIcon:true
                        },
                    ],
                    // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
                    checkbox: true,
                    index: true,
                    url: 'accountinfo/getlist',
                    showPagination: true, // 翻页器
                    // 请求表格数据的 方式
                    method: "post",
                    //表格 title 文字
                    tableTitle: false,
                    //是否需要给 th 加 样式boder 如果需要加上addBoderClass 不需要显示空或者不加这个字段配置
                    addBoderClass: "addBoderClass",
                },
                selectRow: [],
                editTableRow: null,
                detailFlag: false,
                editFlag: false,
                keyFlag: false,
                addFlag: false
            };
        },
        computed: {},
        watch: {},
        mounted() {
            this.setTableHeight()
            this.$refs.globalTable.loading_data()
            window.onresize = ()=>{
                this.setTableHeight()
            }
            // this.getJXList()
        },
        methods: {
            setTableHeight(){
                this.$set(this.table_config,'height',window.innerHeight-340)
            },
            resetSearch(){
                this.form.name=""
                this.$refs.globalTable.loading_data()
            },
            accountinfoGetlist(params) {
                accountinfoGetlist(params).then(res => {
                    if (res.code == 200) {
                        console.log(490,res);
                        this.listData=res.data.values;
                    }
                })
            },
            onSearch(){
                var params = JSON.parse(JSON.stringify(this.form))
                params = {
                    pageNumber: 1,
                    pageSize: 10,
                    name:this.form.name ||'',
                    orderBy: [],
                }
                this.$refs.globalTable.loading_data(params);
            },
            /**
             * @desc 机型列表
             * @param
             * @author zhoujie
             * @date 2022/11/24 14:57:26
             */
            getJXList() {
                getList().then(res => {
                    if (res.code == 200) {
                        this.sbjxArr=res.data || []
                    }
                })
            },
            sbxhChange(){
                this.onSearch()
            },
            /**
             * @description  搜索查询
             * @param {fromdata}: Object 查询数据
             **/
            handleSearch(fromdata) {
                this.form = fromdata
                this.getTableData();
            },
            // 获取表格数据
            getTableData() {
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(this.form);
                });
            },
            /**
             * @description  监听查询条件机型变化
             * @param string: 选中的ID
             **/
            selectChangeVal(val) {
                this.otaGetSbhx(val)
                // if (val) {
                //     this.otaGetSbhx(val)
                // } else {
                //     this.formArr[1].options = [];
                // }
            },
            /**
             * @description  获取设备机型
             * @param :
             **/
            async sbzcGetSbjx() {
                let res = await sbzcGetSbjx({
                    pageNumber: 1,
                    pageSize: 999
                })
                if (res.code == 200 && res.data && res.data.values) {
                    this.sbjxArr=res.data.values || []
                }
            },
            /**
             * @desc 根据机型获取设备型号
             * @param
             * @author zhoujie
             * @date 2022/11/30 09:11:32
             */
            getSbxh(data){
                this.devicemodelgetlist(data)
            },
            /**
             * @desc 获取型号列表
             * @param
             * @author zhoujie
             * @date 2022/12/30 09:16:13
             */
            devicemodelgetlist(data) {
                const query = {
                    deviceTypeId: data,
                    pageNumber: 1,
                    pageSize: 999
                }
                devicemodelgetlist(query).then(res => {
                    if (res.code = 200) {
                        if (res.data.values.length) {
                            this.form.deviceModelId=""
                            this.sbxhArr=res.data.values
                            this.onSearch()
                        }else{
                            this.form.deviceModelId=""
                            this.sbxhArr=[]
                            this.onSearch()
                        }
                    }
                })
            },
            /**
             * @description  添加表格
             * @param {row}: Object 点击项数据
             **/
            addTableData() {
                this.addFlag = true;
                this.editTableRow = null;
                // this.W.$tips('warning', '未实现');
                // this.editTableRow = null;
                // this.editFlag = true;
            },
            /**
             * @param arr:{data} --勾选的数据
             * @return: not
             * 表格勾选回调
             */
            handleSelectionChange(data) {
                this.selectRow = data;
            },
            /**
             * @param arr:{data} --当前行数据
             * @return: not
             * 表格查看的回调
             */
            // handelDetail(data) {
            handelDetail(row) {
                console.log('编辑row', row);
                this.editFlag = true;
                this.editTableRow = row;
            },
            // 表格删除回调
            delTableData(row) {
                console.log(row);
                this.W.$myConfirm('warning',this.i18n.t("Are you sure you want to delete it"))
                    .then(async () => {
                        console.log('确认',deleteDocument,row.id);
                        let res = await accountinfoDelete({ id: row.id });
                        if (res.code == 200) {
                            // "删除成功!"
                            this.W.$tips("success",  this.i18n.t('Successfully deleted'));
                            this.$refs.globalTable.loading_data();
                        }
                    })
                    .catch(() => {
                    });
            },
            //  密码修改回调
            handleEdit(row) {
                console.log('修改密码row', row.createBy);
                this.editTableRow = row;
                this.keyFlag = true;
            },
        }
    };
</script>

<style scoped lang="scss">
    .right-height {
        height: calc(100% - 36px);
    }
    ::v-deep .content-width .el-form.wrapperform-box .el-form-item {
        width: calc((100% - 100px) / 3);
    }
</style>
